<template>
  <div class="house-management">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/sys/residentsManagement?navIndex=3' }">数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>用户审核</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
      <el-row class="el-padding-20 el-white-bgcolor">
        <el-row class="my-margin-top-20" :gutter="6">
          <el-col :span="3">
            <el-select
              class="el-margin-r-10"
              v-model="applyState"
              placeholder="请选择审核状态"
              style="width:100%"
              @change="search"
              size="small"
            >
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="审核通过" :value="1"></el-option>
              <el-option label="审核不通过" :value="2"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="applyType"
              placeholder="请选择申请类型"
              style="width:100%"
              @change="search"
              size="small"
               clearable
            >
              <el-option label="申请住户" :value="1"></el-option>
              <el-option label="申请业主" :value="2"></el-option>
            </el-select>
          </el-col>
        </el-row>

        <!-- <el-row class="el-align-right el-font-xs">
          审核状态：
          <el-select
            class="el-margin-r-10"
            v-model="applyState"
            placeholder="请选择审核状态"
            style="width:120px;"
            @change="search"
          >
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="审核通过" :value="1"></el-option>
            <el-option label="审核不通过" :value="2"></el-option>
          </el-select>申请类型：
          <el-select
            v-model="applyType"
            placeholder="请选择申请类型"
            style="width:120px;"
            @change="search"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option label="申请住户" :value="1"></el-option>
            <el-option label="申请业主" :value="2"></el-option>
          </el-select>
        </el-row>-->
        <el-table
          class="el-margin-t-10"
          :data="table.tableData"
          border
          stripe
          style="width:100%"
          size="small"
          :highlight-current-row="true"
          ref="multipleTable"
        >
          <el-table-column label="姓名" prop="realName" width="100"></el-table-column>
          <el-table-column label="昵称">
            <template slot-scope="scope">{{scope.row.nickName}}</template>
          </el-table-column>
          <el-table-column label="性别" prop="usable" width="50">
            <template slot-scope="scope">{{scope.row.gender-1?"女":"男"}}</template>
          </el-table-column>
          <el-table-column label="身份证号码" prop="idCard" width="180"></el-table-column>
          <el-table-column label="审核类型" prop="applyType" width="80">
            <template slot-scope="scope">{{applyTypes[scope.row.applyType-1]}}</template>
          </el-table-column>
          <el-table-column label="楼栋" prop="buildNum" width="80"></el-table-column>
          <el-table-column label="单元" prop="unitNum" width="80"></el-table-column>
          <el-table-column label="房号" prop="houseNum" width="80"></el-table-column>
          <el-table-column label="手机号" prop="phoneNum" width="120"></el-table-column>
          <el-table-column label="审核状态" prop="applyState" width="80">
            <template slot-scope="scope">{{applyStates[scope.row.applyState]}}</template>
          </el-table-column>
          <el-table-column label="身份证正面" prop="idCardFront" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="showPhoto(scope.row.idCardFront)"
              >{{scope.row.idCardFront?"[身份证正面]":""}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="身份证反面" prop="idCardBack" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="showPhoto(scope.row.idCardBack)"
              >{{scope.row.idCardBack?"[身份证反面]":""}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" prop="createTime">
            <template slot-scope="scope">{{scope.row.createTime|dateformat()}}</template>
          </el-table-column>
          <el-table-column label="审核时间" prop="verifyTime">
            <template slot-scope="scope">{{scope.row.verifyTime|dateformat()}}</template>
          </el-table-column>
          <el-table-column label="审核人" prop="verifyName"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="setState(scope.row,true)"
                v-if="scope.row.applyState===0"
              >通过</el-button>
              <el-button
                type="text"
                @click="setState(scope.row,false)"
                v-if="scope.row.applyState===0"
              >驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="el-margin-t-10 my-el-pagination"
          @current-change="currentChangeHandle"
          :current-page="table.currentPage"
          :page-size="table.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="table.rowCount"
        ></el-pagination>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { bus } from "../../tools/bus";
import { setItem, getItem } from "../../tools/common";
export default {
  data() {
    return {
      applyState: 0,
      applyStates: ["待审核", "审核通过", "审核不通过"],
      applyType: null,
      applyTypes: ["申请住户", "申请业主"],
      table: {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        rowCount: 3,
        queryKey: ""
      }
    };
  },
  mounted() {
    this.getMessage();
  },
  methods: {
    showPhoto(_src) {
      let html = '<img src="' + _src + '" style="max-height:400px;"/>';
      this.$alert(html, {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false
      });
    },
    setState(rows, isUse) {
      this.$confirm(
        "确定" +
          (isUse ? "通过" : "驳回") +
          "用户" +
          rows.realName +
          "的申请？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let url = "/userApply/" + (isUse ? "accept" : "refuse");
          let p = {
            applyId: rows.applyId
          };

          this.$http
            .fetch(url, p)
            .then(res => {

              this.getMessage();
            })
            .catch(err => {});
        })
        .catch(() => {});
    },
    search() {
      this.table.currentPage = 1;
      this.getMessage();
    },
    getMessage() {
      let url = "/userApply/list";
      let info = getItem("info") ? getItem("info") : {};
      let p = {
        communityId: info.communityId,
        start: (this.table.currentPage - 1) * this.table.pageSize,
        num: this.table.pageSize,
        applyState: this.applyState
      };

      p.applyType = this.applyType;

      this.$http
        .fetch(url, p)
        .then(res => {
          console.log(res);
          this.table.rowCount = res.data.total;
          this.table.tableData = [];
          for (let i = 0; i < res.data.rows.length; i++) {
            let row = res.data.rows[i];
            this.table.tableData.push({
              communityId: info.communityId,
              applyId: row.applyId ? row.applyId : "", //			int			审核id
              nickName: row.nickName ? row.nickName : "", //  		string		昵称
              applyType: row.applyType ? row.applyType : "", // 		int			审核类型(1:申请住户,2:申请业主)
              applyState:
                row.applyState || row.applyState == 0 ? row.applyState : "", //    		int			审核状态(0:待审核,1:审核通过,2:审核不通过)
              buildNum: row.buildNum ? row.buildNum : "", //  		string		楼栋(楼栋,单元,房号3个拼成一个字段)
              unitNum: row.unitNum ? row.unitNum : "", //   		string		单元(楼栋,单元,房号3个拼成一个字段)
              houseNum: row.houseNum ? row.houseNum : "", //  		string		房号(楼栋,单元,房号3个拼成一个字段)
              phoneNum: row.phoneNum ? row.phoneNum : "", //  		string		手机号
              realName: row.realName ? row.realName : "", //  		string		姓名
              gender: row.gender ? row.gender : "", //			int			性别(1:男,2:女)
              idCard: row.idCard ? row.idCard : "", //   		string		身份证号码
              idCardFront: row.idCardFront ? row.idCardFront : "", //		string		身份证正面
              idCardBack: row.idCardBack ? row.idCardBack : "", //		string		身份证背面
              createTime: row.createTime ? row.createTime : "", //		string		申请时间
              verifyTime: row.verifyTime ? row.verifyTime : "", // 		string		审核时间
              verifyName: row.verifyName ? row.verifyName : "" // 		string		审核人
            });
          }
        })
        .catch(err => {});
    },
    currentChangeHandle(pageNum) {
      this.table.currentPage = pageNum;
      this.getMessage();
    }
  }
};
</script>
